<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="message"></div>
    </el-col>
    <el-col :span="12">
      <div class=""></div>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data () {
    return {}
  },
  mounted () {
    this.initEcharts()
  },
  methods: {
    // 初始化echarts
    initEcharts () {
      const myChart = echarts.init(document.querySelector('.message'))
      myChart.setOption(
        {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          tooltips: true,
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.message{
  height: 400px;
}
.el-col {
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
